<template>
    <div class="th_main">
        <div class="three">
            <div class="left">
                <div class="top">
                    <img class="zhi" src="../../assets/a-zhiping.png" alt="" />
                </div>
                <div class="th_bottom">
                    <div class="ll">
                        <ul>
                            <li>
                                <div class="colorBox gloden"></div>
                                <span>月光缪斯</span>
                            </li>
                            <li>
                                <div class="colorBox red"></div>
                                <span>薄雾玫瑰</span>
                            </li>
                            <li>
                                <div class="colorBox black"></div>
                                <span>镜中之夜</span>
                            </li>
                        </ul>
                    </div>
                    <div class="rr">
                        <div class="vrd">
                            <span class="iconfont icon-sousuo"></span>
                            3D体验
                        </div>
                    </div>
                </div>
                <div class="duan">剔透灵动，携光而来</div>
            </div>
            <div class="right">
                <img class="zhe" src="../../assets/a-zhedie.jpg" alt="" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {};
    },
    methods: {},
    created() {},
};
</script>
<style scoped lang="scss">
.th_main {
    height: calc(100vh - 47px);
    background-color: #fff;
    .three {
        display: flex;
        .left {
            position: relative;
            .top {
                .zhi {
                    width: 781px;
                    height: 737px;
                }
            }
            .th_bottom {
                display: flex;
                justify-content: space-around;
                align-items: center;
                .ll {
                    width: 45%;
                    ul {
                        display: flex;
                        justify-content: space-between;
                        li {
                            float: left;
                            display: flex;
                            align-items: center;
                            .colorBox {
                                width: 28px;
                                height: 28px;
                                border-radius: 50%;
                                margin: 0 10px;
                                border: 1px solid #ccc;
                            }
                            .gloden {
                                background-color: #fbf1e1;
                            }
                            .red {
                                background-color: #ffdee2;
                            }
                            .black {
                                background-color: #44423d;
                            }
                        }
                        li:hover {
                            cursor: pointer;
                        }
                    }
                }
                .rr {
                    .vrd {
                        padding: 5px 12px;
                        background-color: #f6f6f6;
                        border-radius: 20px;
                        font-weight: 700;
                    }
                    .vrd:hover {
                        cursor: pointer;
                    }
                }
            }
            .duan{
                margin: 32px 0 0 95px;
                font-size: 18px;
            }
        }
        .right {
            .zhe {
                width: 1000px;
                height: 910px;
            }
        }
    }
    li {
        list-style: none;
    }
}
</style>
